<template>
  <div class="page">
    <div class="selectData search">
      <span style="margin-left:20px;margin-right:6px;font-size:14px;"
        >年份:</span
      >
      <el-date-picker
        v-model="year"
        size="small"
        clearable
        type="year"
        placeholder="选择年"
      >
      </el-date-picker>
      <span style="margin-left:20px;margin-right:6px;font-size:14px;"
        >上下半年:</span
      >
      <el-select
        class="userIntSize"
        v-model="timeNode"
        size="small"
        clearable
        placeholder="请选择"
      >
        <el-option
          v-for="item in vertical"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <span style="margin-left:20px;margin-right:6px;font-size:14px;"
        >区域:</span
      >
      <el-select
        class="userIntSize"
        v-model="departmentTypeId"
        size="small"
        clearable
        placeholder="请选择"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button
        type="primary"
        size="small"
        style="margin-left:20px;"
        @click="getNumber()"
        >查询</el-button
      >
    </div>
    <div id="Ymysix"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      year: "2020",
      timeNode: "1",
      departmentTypeId: "2",
      vertical: [
        {
          value: "1",
          label: "上半年"
        },
        {
          value: "2",
          label: "下半年"
        }
      ],
      options: [
        {
          value: "2",
          label: "区县"
        },
        {
          value: "4",
          label: "西咸"
        },
        {
          value: "3",
          label: "开发区"
        }
      ]
    };
  },
  mounted() {
    // this.dataAnalysis();
    this.getNumber();
  },
  methods: {
    // 获取相关任务量
    getNumber() {
      this.$axios
        .post("/departmentCountySummary/getList", {
          year: this.year,
          departmentTypeId: this.departmentTypeId,
          timeNode: this.timeNode
        })
        .then(res => {
          if (res.code == 200) {
            console.log(res);
            let nameAll = [];
            let numberAll = [];
            res.data.forEach((item, index) => {
              nameAll.push(item.departmentName);
              numberAll.push(item.score);
            });
            this.dataAnalysis(nameAll, numberAll);
          }
        })
        .catch(err => {});
    },

    dataAnalysis(nameAll, numberAll) {
      console.log(nameAll, numberAll, 999);
      var table1 = this.$echarts.init(document.getElementById("Ymysix"));
      table1.setOption({
        color: ["#0066FF"],
        xAxis: {
          type: "category",
          data: nameAll
        },
        yAxis: {
          type: "value",
            min: 60,
            max: 100,
        },
        series: [
          {
            data: numberAll,
            type: "line",
            itemStyle: { normal: { label: { show: true } } }
          }
        ]
      });
    }
  }
};
</script>

<style lang="less" scoped>
.page {
  width: 100%;
  height: auto;
  > .search {
    width: 100%;
    height: 40px;
  }
  > #Ymysix {
    width: 100%;
    height: 400px;
  }
}
.selectData {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
